<!--
18.2 定义组件
定义组件语法:
// 定义组件
const 组件对象 = {
    // 渲染模板
    template : ``,
    // 组件数据 (必须是一个函数)
    data : function () {
        return {
        }
    },
    // 组件属性
    props : {
    },
    // 计算属性
    computed : {
    },
    // 方法
    methods : {
    },
    // 监控属性
    watch : {
    },
    // 生命周期钩子
    created (){
    }
};
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vuejs定义组件</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
</div>

<script type="text/javascript">
    // 定义组件
    const MyButton = {
        // 渲染模板
        template: `<button @click="calc()">你点击了: {{num}}次！</button>`,
        // 组件数据（必须是一个函数）
        data: function () {
            return {
                num: 1
            }
        },
        // 方法
        methods: {
            calc: function () {
                this.num++
            }
        }
    };
    // 创建vue实例
    var vue = new Vue({
        el: '#app',
        data: {}
    });
</script>
</body>
</html>